<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>zepto实战练习</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/animation.css">
</head>
<body>
  
  <div id="container">
    <div class="page page-1-1 page-current ">
      <img class="img_1 pt-page-moveFromTop" src="./images/cover.png" alt="">
      <img class="img_2 pt-page-moveFromLeft" src="./images/wording_cover.png" alt="">
      <img class="img_3 common_img pt-page-moveIconUp" src="./images/icon_up.png" alt="">
    </div>

    <div class="page page-2-1 hide">
      <img class="img_1 pt-page-moveFromBottom" src="./images/wording.png" />
      <img class="img_2 pt-page-moveCircle" src="./images/circle.png" />
      <img class="img_3 pt-page-moveFromLeft" src="./images/people.png" />
      <img class="img_4 pt-page-scaleUp" src="./images/dot1.png" />
      <img class="img_5 pt-page-scaleUp" src="./images/check_develop.png" />
      <img class="img_6 common_img pt-page-moveIconUp" src="./images/icon_up.png" />
      <img class="img_7 pt-page-scaleUp" src="./images/floating_develop.png" />
    </div>
    
    <div class="page page-2-2 hide">
      <img class="img_1 pt-page-flipInLeft" src="./images/introduction.png" />
      <img class="img_2 pt-page-flipInLeft" src="./images/btn_develop.png" />
      <img class="img_3 pt-page-flipInLeft" src="./images/dot2.png" />
      <img class="img_6 common_img pt-page-moveIconUp" src="./images/icon_up.png" />
    </div>

    <div class="page page-3-1 hide">
      <img class="img_1 pt-page-moveFromBottom" src="./images/wording_design.png" />
      <img class="img_2 pt-page-moveCircle" src="./images/circle-design.png" />
      <img class="img_3 pt-page-moveFromLeft" src="./images/people_design.png" />
      <img class="img_4 pt-page-scaleUp" src="./images/dot1.png" />
      <img class="img_5 pt-page-scaleUp" src="./images/check_design.png" />
      <img class="img_6 common_img pt-page-moveIconUp" src="./images/icon_up.png" />
      <img class="img_7 pt-page-scaleUp" src="./images/floating_design.png" />
    </div>
    <div class="page page-3-2 hide">
      <img class="img_1 pt-page-flipInLeft" src="./images/introduction_design.png" />
      <img class="img_2 pt-page-flipInLeft" src="./images/btn_design.png" />
      <img class="img_3 pt-page-flipInLeft" src="./images/dot2.png" />
      <img class="img_6 common_img pt-page-moveIconUp" src="./images/icon_up.png" />
    </div>
    <div class="page page-4-1 hide">
      <img class="img_1 pt-page-moveFromBottom" src="./images/wording_production.png" />
      <img class="img_2 pt-page-moveCircle" src="./images/circle-production.png" />
      <img class="img_3 pt-page-moveFromLeft" src="./images/people_production.png" />
      <img class="img_4 pt-page-scaleUp" src="./images/dot1.png" />
      <img class="img_5 pt-page-scaleUp" src="./images/check_production.png" />
      <img class="img_6 common_img pt-page-moveIconUp" src="./images/icon_up.png" />
      <img class="img_7 pt-page-scaleUp" src="./images/floating_production.png" />
    </div>
    <div class="page page-4-2 hide">
      <img class="img_1 pt-page-flipInLeft" src="./images/introduction_production.png" />
      <img class="img_2 pt-page-flipInLeft" src="./images/btn_production.png" />
      <img class="img_3 pt-page-flipInLeft" src="./images/dot2.png" />
      <img class="img_6 common_img pt-page-moveIconUp" src="./images/icon_up.png" />
    </div>
    <div class="page page-5-1 hide">
      <img class="img_1 pt-page-flipInLeft" src="./images/pic_back.png" />
      <img class="img_2 pt-page-flipInLeft" src="./images/btn_join.png" />
    </div>
  </div>

  <script src="./js/zepto.js"></script>
  <script src="./js/touch.js"></script>
  <script src="./js/index.js"></script>
</body>
</html>